<%@ page import="java.util.*, milu.*, milu.models.*,com.google.appengine.api.datastore.*" %>
<jsp:include page="/header.jsp" />

<%
MyUser myUser = (MyUser)request.getAttribute("myUser");
Recipe recipe = (Recipe)request.getAttribute("recipe");
%>
<script>
$(function(){
    
    var resizeImg = function(){
        var contWidth = $(".recipe-pic").width();
        var contHeight = $(".recipe-pic").height();
        var padWidth = contWidth*1.1;
        var padHeight = contHeight*1.1;

        var $this = $(this);

        // find out which part to resize (only 1)
        if($this.height() > $this.width()) { // resize only height
            if($this.height() > (padHeight)) {
                $this.css("height", padHeight);
            }
        } else {
            if($this.width() > (padWidth)) {
                $this.css("width", padWidth);
            }
        }

        // now our image is proportionally resized
        // let's position it

        // move left only if width is bigger than container
        if($this.width() > contWidth) {
            var left = ($this.width() - contWidth) / 2;
            $this.css("left", "-"+left+"px");
        }

        // move top only if height is bigger than container
        if($this.height() > contHeight) {
            var top = ($this.height() - contHeight) / 2;
            $this.css("top", "-"+top+"px");
        }
        
    };

    $("#recipe_pic").load(resizeImg);
    resizeImg.apply($("#recipe_pic").get(0));
});
</script>
<div class="recipe">
    <div class="recipe-left">
        <div class="recipe-pic">
            <img id="recipe_pic" src="/serve/<%=recipe.getMyImage().getKey().getId()%>.png" />
        </div>
        <div class="recipe-license">
            <p>This work is licensed under a <a href="http://creativecommons.org/licenses/by-sa/3.0/" rel="external">Creative Commons Attribution-Share Alike 3.0 License</a></p>
        </div>
        <div class="recipe-content">
            <%=recipe.getContent().getValue()%>
        </div>
        <div class="recipe-tags">
        Tag: 
        <%
        int count = 0;
        for(String tag : recipe.getTags()) {
            if(count != 0)
                out.print(",");
            count++;
        %>
        <a href="/search?q=<%=tag%>"><%=tag%></a><% } %>
        </div>

    </div><!--/recipe-left-->

    <div class="recipe-right">
        <%
        if(myUser != null && recipe.getUserKey().equals(myUser.getKey())) {
        %>
        <div class="recipe-edit"><a href="/edit-recipe/<%=recipe.getKey().getId()%>">Modifica</a></div>
        <% } %>
        <h1><%=recipe.getTitle()%></h1>
        <%
        MyUser recipeAuthor = (MyUser)request.getAttribute("recipeAuthor");
        %>
        <span class="recipe-author">by <a href="/users/<%=recipeAuthor.getKey().getId()%>"><%=recipeAuthor.getName()%></a></span>
        <div class="recipe-ingredients">
            <h3>Ingredienti:</h3>
            <%if(recipe.getIngredients() != null) { 
                String[] ingredients = recipe.getIngredients().getValue().split("\n");
            %>
                <ul>
                <% for(String ingredient : ingredients) { %>
                    <li><%=ingredient%></li>
                <% } %>
                </ul>
            <% 
            } %>
        </div>
        <div class="recipe-comments">
            <h2><a name="comments"></a>Commenti</h2>
    <%
    if(myUser != null) {
    %>
    <form method="post" action="/add-comment">
        <input type="hidden" name="recipeKey" value="<%=KeyFactory.keyToString(recipe.getKey())%>"/>
        <textarea name="comment"></textarea>
        <input type="submit" value="Aggiungi commento" />
    </form>
    <% } %>

    <%
    List<RecipeComment> comments = (List<RecipeComment>)request.getAttribute("comments");
    for(RecipeComment comment : comments) {
        MyUser author = comment.getAuthor();
    %>
            <div class="comment-box">
                <div class="comment-author-pic">
                    <%if(author.getAvatarKey() != null) { %>
                        <a href="/users/<%=author.getKey().getId()%>"><img src="/serve/<%=author.getAvatarKey().getId()%>.png" /></a>
                    <% } else { %>
                        
                        <a href="/users/<%=author.getKey().getId()%>">
                            <img src="/images/default-avatar.png" />
                        
                        </a>

                    <% } %>
                </div>
                <div class="comment-author">
                    <a href="/users/<%=author.getKey().getId()%>"><%=author.getName()%></a>
                </div>
                <div class="comment-date">
                    <a href="#"><%=comment.getCreated()%></a>
                </div>
                <div class="comment-itself">
                <p>
                <%=comment.getComment().getValue().replaceAll("(\r\n)\\1+", "</p><p>").replaceAll("\r\n","<br />")%>
                </p>
                </div>

            </div><!--/comment-box-->
    <% } %>
        </div><!--/recipe-comments-->
    </div><!--/recipe-right-->

</div><!--/recipe-->
<jsp:include page="/footer.jsp" />
